<template>
  <div class="login">
        <!-- Unnamed(动态面板) -->
        <div class="ax_default">
            <div class="panel_state">
                <div class="panel_state_content">
                    <!-- Unnamed (矩形) -->
                    <div class="ax_default_one">
                        <p>WELCOME</p>
                        <p>七尾智慧社区管理系统后台</p>
                    </div>
                    <!-- Unnamed (垂直线) -->
                    <div class="ax_default-line1">
                        <img src="https://cdn7.axureshop.com/demo2024/2033334/images/%E7%99%BB%E5%BD%95/u3987.svg" alt="">
                    </div>
                    <!-- 输入框 -->
                    <div class="ax_default-login">
                        <div :class="['shape4-rectanglr',{'admins':admin}]" @click="adminborder">
                            <div class="text_field">
                                <el-input placeholder="用户名" v-model="input" clearable></el-input>
                            </div>
                            <!-- Unnamed (形状) -->
                            <div class="aimin-avater">
                                <img src="https://cdn7.axureshop.com/demo2024/2033334/images/%E7%99%BB%E5%BD%95/u3992.svg" alt="">
                            </div>
                        </div>
                    </div>
                    <!-- 密码框 -->
                    <div class="ax_default-psw">
                        <div :class="['shape4-rectanglr',{'psws':psws}]" @click="pswborder">
                            <div class="text_field">
                                <el-input placeholder="请输入密码" v-model="psw" show-password></el-input>
                            </div>
                            <!-- Unnamed (形状) -->
                            <div class="aimin-avater">
                                <img src="https://cdn7.axureshop.com/demo2024/2033334/images/%E7%99%BB%E5%BD%95/u3996.svg" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="autologin">
                        <div class="ax_default-box_1">
                            <div class="auto-left">
                                <div :class="[{'selected':selectimg},'unselectedimg']" @click="allselection">
                                    <img src="https://cdn7.axureshop.com/demo2024/2033334/images/%E7%99%BB%E5%BD%95/u4000.png" alt="">
                                </div>
                                <span class="text-autoplay">自动登录</span>
                            </div>
                            <div class="auto-right">忘记密码？</div>
                        </div>
                    </div>
                    <div class="logint-btn" @click="open1">登录</div>
                    
                </div>
            </div>
            
        </div>
        <div class="bottom-logo">七尾原型工作室</div>
        <div class="message">
            <el-button :plain="true" @click="open1"  class="offbutton-tu">文字居中</el-button>
        </div>
  </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },
    data() {
        return {
            input: '',
            psw:'',
            selectimg:false,
            admin:false,
            psws:false,
            users:[
                { username: 'testuser', password: 'testpassword123' } // 注意：不要在生产中存储明文密码！
            ]
        }
    },
    mounted(){
        
    },
    methods:{
        allselection(){
            this.selectimg=!this.selectimg
        },
        adminborder(){
            this.admin=!this.admin
        },
        pswborder(){
            this.psws=!this.psws
        },
        open1() {
            if(this.input=='' || this.psw==''){
                this.$alert('用户名或密码为空，请重新输入', '', {
                    confirmButtonText: '确定',
                    // callback: action => {
                    //     this.$message({
                    //     // type: 'info',
                    //     message: `action: ${ action }`
                    //     });
                    // }
                });
            }else{
                this.$axios.post('http://127.0.0.1/login',{
                    ...this.users[0]
                }).then(res=>{
                    localStorage.setItem('ticket',res.data.token)
                    this.$router.push('/about/workbenches')
                    this.$message({
                        message: '登录成功',
                        type: 'success',
                        center:true,
                        // duration:0
                    });
                }).catch(err=>{
                    console.log(err)
                })   
            }
            this.input=''
            this.psw=''
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.offbutton-tu{
    display: none;
}
.message>>>.el-message{
    min-width: none !important;
}
.login{
    width: 100%;
    height: 100vh;
    background-color: rgba(240, 242, 245, 1);
    background-image: url('https://cdn7.axureshop.com/demo2024/2033334/images/%E7%99%BB%E5%BD%95/bg.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-origin: border-box;
    position: relative;
    left: 0px;
    /* width: 10px; */
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
.ax_default{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.panel_state{
    width: 339px;
    height: 349px;
    position: relative;
}
.ax_default_one{
    position: absolute;
    left: 22px;
    top: 0;
    width: 305px;
    height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    letter-spacing: 1.4px;
    color: #FFFFFF;
    /* line-height: 44px; */
    font-weight: 200;
    font-style: normal;
    z-index: 99;
    font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
}
.ax_default_one p:nth-child(1){
    font-size: 32px;
    height: 44px;
    /* font-weight: 200; */
}
.ax_default_one p:nth-child(2){
    font-size: 24px;
    height: 44px;
    /* font-weight: 200; */
}

.ax_default-line1{
    position: absolute;
    left: 0px;
    top: 9px;
    width: 2px;
    height: 70px;
    z-index: 99;
}
.ax_default-line1 img{
    position: absolute;
    left: -1px;
    top: -1px;
    width: 5px;
    height: 73px;
}
.ax_default-login{
    position: absolute;
    left: 0px;
    top: 126px;
    width: 339px;
    height: 40px;
}
.shape4-rectanglr{
    width: 339px;
    height: 40px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    background-color: #FFFFFF;
    border: 0.5px solid #fff;
}
.psws,.admins{
    border: 0.5px solid #1890ff;  
    /* 边框颜色 */
}
.admin{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 339px;
    height: 40px;
}
.text_field{
    position: absolute;
    left: 38px;
    top: 52%;
    transform: translateY(-50%);
    width: 244px;
    height: 25px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.647058823529412);
}
.text_field >>>.el-input--suffix .el-input__inner {
    width: 244px;
    height: 25px;
    padding: 2px 2px 2px 2px;
    /* position: absolute;
    left: 0px;
    top: 0px; */
    border: none;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
}
.text_field >>> .el-input__icon{
    line-height: 29px !important;
    display: none;
}
.aimin-avater{
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 16px;
}
.ax_default-psw{
    position: absolute;
    left: 0px;
    top: 190px;
    width: 339px;
    height: 40px;
    display: flex;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.149019607843137);
    text-align: left;
    line-height: 22px;
}
.autologin{
    position: absolute;
    left: 0px;
    top: 263px;
    width: 100%;
}
.ax_default-box_1{
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: space-between;
}
.unselectedimg{
    width: 17px;
    height: 17px;
    background-color: rgba(24, 144, 255, 1);
    border-radius: 2px;
    position: relative;
}
.unselectedimg img{
    width: 11px;
    height: 11px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.auto-left{
    display: flex;
    align-items: center;
}
.text-autoplay,.auto-right{
    font-size: 14px;
    color: #FFFFFF;
}
.text-autoplay{
    margin-left: 10px;
}
.logint-btn{
    position: absolute;
    left: 0px;
    top: 309px;
    width: 339px;
    height: 40px;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    letter-spacing: 4px;
    color: #FFFFFF;
    text-align: center;
    background-color: rgba(24, 144, 255, 1);
    border-radius: 2px;
    line-height: 40px;
    cursor: pointer;
}
.bottom-logo{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 30px;
    font-size: 14px;
    color: #FFFFFF;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
}
.selected{
    background-color: #FFFFFF !important;
}
.selected img{
    display: none;
}
</style>
